<template>
  <div class="resultDialog">
    <el-dialog
      :visible.sync="visable"
      width="690px"
      title="参数导入结果"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="dialog-body result-body">
        <div class="box">
          <div class="box-title">
            可用参数
          </div>
          <div class="box-thead">
            <div class="box-th">
              参数名称
            </div>
            <div class="box-th">
              参数类型
            </div>
            <div class="box-th">
              参数值
            </div>
          </div>
          <div class="box-tbody">
            <el-scrollbar class="scroll-bar">
              <div v-for="(item, index) in ableList" :key="index" class="box-tr">
                <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                  <div class="box-td">
                    {{item.name}}
                  </div>
                </el-tooltip>
                <div class="box-td">
                  {{parmeterTypelist.find(t => t.k === item.parmeter_type).v}}
                </div>
                <el-tooltip class="item" effect="dark" :content="item.pwe" placement="top">
                  <div class="box-td">
                    {{item.pwe}}
                  </div>
                </el-tooltip>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="box error">
          <div class="box-title error">
            不可用参数
          </div>
          <div class="box-thead">
            <div class="box-th">
              参数名称
            </div>
            <div class="box-th">
              参数类型
            </div>
            <div class="box-th">
              参数值
            </div>
          </div>
          <div class="box-tbody">
            <el-scrollbar class="scroll-bar">
              <div v-for="(item, index) in unableList" :key="index" class="box-tr">
                <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                  <div class="box-td">
                    {{item.name}}
                  </div>
                </el-tooltip>
                <div class="box-td">
                  {{parmeterTypelist.find(t => t.k === item.parmeter_type).v}}
                </div>
                <el-tooltip class="item" effect="dark" :content="item.pwe" placement="top">
                  <div class="box-td">
                    {{item.pwe}}
                  </div>
                </el-tooltip>
              </div>
            </el-scrollbar>
          </div>
          <div class="box-footer">
            <i class="el-icon-warning-outline"></i>
            <span>
              导入成功后，不可用参数将删除
            </span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">
          取 消
        </el-button>
        <el-button type="primary" @click="sure">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: {
    parmeterTypelist: {
      type: Array,
      default: () => []
    },
    ableList: {
      type: Array,
      default: () => []
    },
    unableList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visable: true
    };
  },

  methods: {
    cancel() {
      this.$emit('cancel')
    },
    sure() {
      this.$emit('sure')
    }
  },
  created() {
    
  },
};
</script>

<style lang="stylus">
.resultDialog {
  .result-body {
    padding: 20px 40px;
    flexMiddle(space-between);
  }
  .box {
    width: getPx(290);
    height: getPx(440);
    box-sizing: border-box;
    border: 1px solid #d3e8f7;
    border-radius: getPx(4);
    position: relative;
    &.error {
      border: 1px solid $error;
      .box-tbody {
        box-sizing: border-box;
        height: getPx(335);
        padding-bottom: getPx(30);
      }
    }
    .box-title {
      height: getPx(44);
      font-size: getPx(14);
      font-weight: bold;
      background: #eef3f8;
      padding-left: getPx(20);
      border-radius: getPx(4) getPx(4) 0 0;
      flexMiddle(flex-start);
      &.error {
        background: #ffe5e5;
      }
    }
    .box-thead {
      flexMiddle(space-around);
      height: getPx(39);
      border-bottom: 1px solid #f1f5f9;
      font-size: getPx(12);
      color: #8296b4;
    }
    .box-tbody {
      height: getPx(335);
    }
    .box-tr {
      flexMiddle(space-around);
      height: getPx(39);
      border-bottom: 1px solid #f1f5f9;
      color: #333;
      font-size: getPx(12);
    }
    .box-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: getPx(30);
      background: #ff9999;
      color: #fff;
      font-size: getPx(12);
      flexMiddle(center);
      i {
        font-size: getPx(14);
        margin-right: getPx(10);
      }
    }
  }
}

</style>